<template>
<q-dialog class="cloud-sel-dir dialog" v-model="show" persistent>
  <q-card v-drag style="min-width: 378px" class="no-shadow dialog-content">
    <q-card-section class="dialog-title bg-primary">
      <div class="text-center text-white">
        保存到远程
      </div>
    </q-card-section>
    <div class="content relative-position">
      <div class="relative-position">
        <q-scroll-area
          :thumb-style="CommonConfig.thumbStyle"
          style="height: 210px"
          class="bg-white scorll-content"
        >
          <q-tree :nodes="cloudDir" node-key="id" ref="cloudFolderTree" :selected.sync="cloudSelected"
                  :expanded.sync="cloudExpanded"
                  @lazy-load="getCloudFolderChildList" @update:selected="selectCloudTree" selected-color="primary"/>
        </q-scroll-area>
        <q-inner-loading :showing="fileLoading">
          <q-spinner-gears size="50px" color="primary" />
        </q-inner-loading>
      </div>
    </div>
    <!--    底部确认取消-->
    <q-card-section class="dialog-footer text-center margin-t-10 margin-b-10 no-padding">
      <q-btn class="btn q-mr-md" outline label="取消" color="primary" @click="hideDialog" />
      <q-btn class="btn" unelevated label="确认" color="primary" @click="submit" />
    </q-card-section>
  </q-card>
</q-dialog>
</template>

<script>
import { getCloudList } from 'src/boot/program-v2/G-gov'

export default {
  name: 'cloud-sel-dir',
  data () {
    return {
      show: false,
      id: 0, // 云端id
      cloudDir: [], // 云端文件夹树结构
      cloudSelected: null, // 云端树形选中id
      cloudSelNode: null, // 云端树形选中数据
      cloudExpanded: [0], // 云端展开
      fileLoading: false // 数据加载中
    }
  },
  methods: {
    showDialog () {
      this.show = true
      this.getInfoList()
    },
    hideDialog () {
      this.show = false
    },
    // 获取云端文件夹数据
    getInfoList () {
      this.id = 0
      this.fileLoading = true
      // 获取云端根目录列表
      getCloudList('').then((res) => {
        this.cloudDir = this.initCloudInfo([res.data.curDir], false)
        this.cloudSelected = this.cloudDir[0].id
        this.cloudSelNode = this.cloudDir[0]
        this.cloudDir[0].children = this.initCloudInfo(res.data.dirs, false)
        this.cloudExpanded = [this.cloudSelected]
        this.$nextTick(() => {
          this.$refs.cloudFolderTree.setExpanded(this.cloudSelected, true)
        })
      }).finally(() => {
        this.fileLoading = false
      })
    },
    // 重置数据
    initCloudInfo (info, isFile) {
      return info.map(item => {
        ++this.id
        return {
          ...item,
          id: this.id,
          isFile: isFile,
          icon: 'img:statics/svg/file-icon.svg',
          lazy: !isFile,
          source: 'cloud', // 文件来源，云端
          children: []
        }
      })
    },
    // 获取子级列表
    getCloudFolderChildList ({ node, key, done, fail }) {
      getCloudList(node.path).then((res) => {
        let dirs = this.initCloudInfo(res.data.dirs, false)
        let nodes = dirs
        done(nodes)
      })
    },
    // 选择数据
    selectCloudTree (target) {
      let selNode = this.$refs.cloudFolderTree.getNodeByKey(this.cloudSelected)
      this.cloudSelNode = selNode
      if (!selNode.isFile) {
        this.$refs.cloudFolderTree.setExpanded(this.cloudSelected, true)
      }
    },
    // 提交
    submit () {
      this.$emit('submit', this.cloudSelNode)
      this.hideDialog()
    }
  }
}
</script>

<style scoped lang="stylus">
.content{
  padding 5px 10px 20px
  border-top 1px solid #d3d3d3
  border-bottom 1px solid #d3d3d3
  .scorll-content{
    border 1px solid #d3d3d3
    border-radius 6px
  }
  .file-list{
    padding 10px 5px
  }
}
</style>
